<template>
    <div class="news-detail">
        <h3 class="news-title">{{data.name}}</h3>
        <div class="post-meta">
            <span class="news-time">激活时间：{{renderDate(data.activeTime)}}</span>
            <span class="news-time">注册时间：{{renderDate(data.createTime)}}</span>
            <span class="news-state"><i>|</i>激活状态：{{!data.activeState?'未激活':'已激活'}}</span>
            <span class="news-time">申请面试数量：{{data.applyNum}}</span>
            <span class="news-time">收到面试数量：{{data.inviteNum}}</span>
        </div>
        <h3 class="title" >基本信息</h3>
        <div class="summary" >
            <span class="news-source">真实姓名：{{data.realName}}</span>
             <span class="news-source"><i>|</i>微信昵称：{{data.nickname}}</span>
             <span class="news-source"><i>|</i>性别：{{data.gender}}</span>
             <span class="news-source"><i>|</i>所在高校：{{data.school}}</span>
             <span class="news-source"><i>|</i>所在城市：{{data.city}}</span>
            <span>
                微信头像：
                <img class="avatar" :src="data.avatar" alt="">
            </span>
        </div>

         <h3 class="title" v-if="data.educationList&&data.educationList.length">教育经历</h3>
         <el-table :data="data.educationList" style="width: 100%">
            <el-table-column prop="schoolName" label="学校名称"> </el-table-column>
            <el-table-column prop="majorName" label="院系"> </el-table-column>
            <el-table-column prop="degree" label="学历/在线年纪"> </el-table-column>
            <el-table-column prop="admissionTime" label="入学时间">
                 <template slot-scope="scope">
                    <span>{{renderDate(scope.row.admissionTime)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="graduationTime" label="毕业时间">
                 <template slot-scope="scope">
                    <span>{{renderDate(scope.row.graduationTime)}}</span>
                </template>
            </el-table-column>
         </el-table>

         <h3 class="title" v-if="data.internshipList&&data.internshipList.length">实习经历</h3>
         <el-table :data="data.internshipList" style="width: 100%">
            <el-table-column prop="companyName" label="公司名称"> </el-table-column>
            <el-table-column prop="jobsName" label="岗位名称"> </el-table-column>
            <el-table-column prop="description" label="项目描述"> </el-table-column>
            <el-table-column prop="beginTime" label="开始时间">
                 <template slot-scope="scope">
                    <span>{{renderDate(scope.row.beginTime)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间">
                 <template slot-scope="scope">
                    <span>{{renderDate(scope.row.endTime)}}</span>
                </template>
            </el-table-column>
         </el-table> 
         <h3 class="title" v-if="data.projectList&&data.projectList.length">项目经验</h3>
         <el-table :data="data.projectList  " style="width: 100%">
            <el-table-column prop="name" label="项目名称"> </el-table-column>
            <el-table-column prop="position" label="担任角色"> </el-table-column>
            <el-table-column prop="description" label="项目描述"> </el-table-column>
            <el-table-column prop="beginTime" label="开始时间">
                 <template slot-scope="scope">
                    <span>{{renderDate(scope.row.beginTime)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间">
                 <template slot-scope="scope">
                    <span>{{renderDate(scope.row.endTime)}}</span>
                </template>
            </el-table-column>
         </el-table>

        <h3 class="title" v-if="data.resumeImg&&data.resumeImg.url">简历图片</h3>
        <div class="summary" >
                <img :src="data.avatar" alt="">
        </div>

    </div>
</template>

<script>
    import api from '@/api'
    export default {
        name: 'news',

        data(){
            return {
                data: {}
            }
        },
        created () {
            this.fetch()
        },
        methods: {
            renderDate(uninx) {
                return uninx
                uninx*=1;
                return uninx.toDate()
            },
            fetch(){
                let id = this.$route.query.id;
                api.getStudentDetail({sid: id}).then(res => {
                    if (res.code == 200 && res.data) {
                        res.data.city = res.data.city.replace(']','').replace('[','').replace(',','-')
                        this.data = res.data
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .news-detail{
        .news-title{
            font-size: 26px;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            /*text-align: center;*/
            word-break: break-word;
            font-weight: 400;
            line-height: 1.5;
            margin: 0;
            padding:0;
        }
        .summary{
            margin: 0 0 30px;
            background: #f5f8fb;
            padding: 30px 20px;
            font-size: 12px;
            span{
                display: block;
                margin:0 0 20px; 
            }
            img{
                display: inline-block;
                vertical-align: text-top;
                    max-height: 500px;
                    max-width: 500px;
                    &.avatar{
                        max-width: 100px;
                        max-height: 100px;
                    }
                }
        }
        .title{
            margin: 15px 0 20px 0;
            color: #666;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 18px;
        }
        .post-meta{
            margin: 15px 0 20px 0;
            color: #999;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 12px;
            /*text-align: center;*/

            span{
                margin:5px 0;
                display: inline-block;

                i{
                    font-style: normal;
                    /*display: inline-block;*/
                    margin: 0 10px;
                }
            }
        }
        .post-body{
            text-align: justify;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 16px;
            line-height: 2;
            color: #555;
        }
    }
</style>

